<template>
    <div class="notice-page">
        <a-card>
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane key="1" tab="全部消息">
                    <a-list :data-source="allMessages" class="message-list">
                        <template #renderItem="{ item }">
                            <a-list-item>
                                <a-list-item-meta>
                                    <template #avatar>
                                        <a-badge :status="item.status" />
                                    </template>
                                    <template #title>
                                        <div class="message-title">
                                            <span>{{ item.title }}</span>
                                            <span class="message-time">{{ item.time }}</span>
                                        </div>
                                    </template>
                                    <template #description>
                                        <div class="message-content">{{ item.content }}</div>
                                    </template>
                                </a-list-item-meta>
                                <template #actions>
                                    <a @click="handleRead(item)">标记已读</a>
                                    <a @click="handleDelete(item)">删除</a>
                                </template>
                            </a-list-item>
                        </template>
                    </a-list>
                </a-tab-pane>
                <a-tab-pane key="2" tab="未读消息">
                    <a-empty v-if="!unreadMessages.length" description="暂无未读消息" />
                    <a-list v-else :data-source="unreadMessages" class="message-list">
                        <template #renderItem="{ item }">
                            <a-list-item>
                                <a-list-item-meta>
                                    <template #avatar>
                                        <a-badge status="processing" />
                                    </template>
                                    <template #title>
                                        <div class="message-title">
                                            <span>{{ item.title }}</span>
                                            <span class="message-time">{{ item.time }}</span>
                                        </div>
                                    </template>
                                    <template #description>
                                        <div class="message-content">{{ item.content }}</div>
                                    </template>
                                </a-list-item-meta>
                                <template #actions>
                                    <a @click="handleRead(item)">标记已读</a>
                                </template>
                            </a-list-item>
                        </template>
                    </a-list>
                </a-tab-pane>
            </a-tabs>
        </a-card>
    </div>
</template>

<script setup lang="ts" name="notice">
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'

const activeKey = ref('1')

// 模拟数据
const messages = ref([
    {
        id: 1,
        title: '系统更新通知',
        content: '系统将于今晚22:00进行例行维护，预计持续2小时。',
        time: '2024-01-10 10:00',
        status: 'processing',
        read: false
    },
    {
        id: 2,
        title: '账号安全提醒',
        content: '检测到您的账号在异地登录，请及时确认是否为本人操作。',
        time: '2024-01-09 15:30',
        status: 'processing',
        read: false
    },
    {
        id: 3,
        title: '待办事项提醒',
        content: '您有一个待审批的工单需要处理。',
        time: '2024-01-08 09:15',
        status: 'default',
        read: true
    }
])

const allMessages = computed(() => messages.value)
const unreadMessages = computed(() => messages.value.filter(msg => !msg.read))

const handleRead = (item: any) => {
    item.read = true
    item.status = 'default'
    message.success('已标记为已读')
}

const handleDelete = (item: any) => {
    messages.value = messages.value.filter(msg => msg.id !== item.id)
    message.success('删除成功')
}
</script>

<style lang="scss" scoped>
.notice-page {
    background: #f0f2f5;

    .message-list {
        .message-title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .message-time {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.45);
            }
        }

        .message-content {
            color: rgba(0, 0, 0, 0.65);
        }

        :deep(.ant-list-item) {
            padding: 16px;
            transition: all 0.3s;

            &:hover {
                background: #f5f5f5;
            }
        }

        :deep(.ant-badge-status-dot) {
            width: 8px;
            height: 8px;
        }
    }
}
</style>